<template>
  <div class="login-wrapper">
    <div class="login-bg" @click="handleBackgroundClick">
      <!-- 背景图片滚动区域 -->
    </div>
    <StartButton ref="startButtonRef" class="start-btn-float" />
  </div>
</template>

<script>
import StartButton from "./StartButton.vue";
export default {
  components: {
    StartButton,
  },
  methods: {
    handleBackgroundClick() {
      // 触发StartButton组件的点击事件
      this.$refs.startButtonRef.handleClick();
    },
  },
};
</script>

<style scoped>
.login-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
}

.login-bg {
  position: fixed;
  top: 0;
  left: 120px; /* 保留侧边空白 */
  width: calc(100vw - 120px); /* 横向铺满剩余可视区域 */
  height: 100vh;
  background-color: #fafafa;
  /* background-image: url("/entrance.jpg"); */
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto; /* 宽度撑满容器 */
  z-index: 1;
  overflow-y: auto; /* 纵向滚动 */
  overflow-x: hidden; /* 横向不滚动 */
}

/* 隐藏滚动条 */
.login-bg::-webkit-scrollbar {
  width: 0 !important;
  background: transparent;
}

.login-bg {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

/* 添加一个内部容器来创建滚动区域 */
.login-bg::before {
  content: "";
  display: block;
  width: 100%;
  height: 145vh; /* 让背景图片有视口高度可以滚动 */
  background-image: url("/entrance.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
.start-btn-float {
  position: absolute;
  top: 32px;
  right: 48px;
  z-index: 10;
  /* 让按钮相对于伪元素定位 */
  transform: translateZ(0);
  display: none; /* 隐藏按钮，因为现在点击背景就能触发登录 */
}
</style>
